<template>
  <view class="card_record">
    <uni-nav-bar @clickLeft="$ui.back()" dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF"
      left-icon="left" status-bar title="交易" />
    <view class="tabs flex-row-between-center">
      <view @click="index = 1" :class="['tab', index === 1 ? 'active-tab' : '']">
        <text>买单</text>
        <view :class="[index === 1 ? 'slider' : 'none']"></view>
      </view>
      <view @click="index = 2" :class="['tab', index === 2 ? 'active-tab' : '']">
        <text>卖单</text>
        <view :class="[index === 2 ? 'slider' : 'none']"></view>
      </view>
      <view @click="index = 3" :class="['tab', index === 3 ? 'active-tab' : '']">
        <text>发布</text>
        <view :class="[index === 3 ? 'slider' : 'none']"></view>
      </view>
      <view @click="index = 4" :class="['tab', index === 4 ? 'active-tab' : '']">
        <text>委托</text>
        <view :class="[index === 4 ? 'slider' : 'none']"></view>
      </view>
      <view @click="index = 5" :class="['tab', index === 5 ? 'active-tab' : '']">
        <text>订单</text>
        <view :class="[index === 5 ? 'slider' : 'none']"></view>
      </view>
    </view>
    <view class="tab-content">
      <view class="cell" @click="openBuyDia(item)" v-for="(item,index) in list" :key="index">
        <view class="flex-row-between-center">
          <view style="font-size: 30rpx;font-family: PingFang SC;font-weight: bold;color: #333333;">{{item.tel}}</view>
          <view>
            <text class="text_style">交易：</text>
            <text>1000</text>
            <text class="text_style marginLeft">DDC</text>
          </view>
        </view>
        <view class="flex-row-between-center">
          <view class="flex-row-center">
            <text class="text_xian">限额：{{item.trading_min}}</text>
            <image v-if="item.trading_payment.includes(1)" class="image_css" src="../../static/cardService/weixin.png"
              mode="aspectFit"></image>
            <image v-if="item.trading_payment.includes(2)" class="image_css" src="../../static/cardService/alipay.png"
              mode="aspectFit"></image>
            <image v-if="item.trading_payment.includes(3)" class="image_css" src="../../static/cardService/bank.png"
              mode="aspectFit"></image>
          </view>
          <view>
            <text class="text_style">实付：</text>
            <text>{{item.trading_pay}}</text>
            <text class="text_style marginLeft">CNY</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getTrading,
    getOrder
  } from '../../api/cardService/card.js'
  export default {
    data() {
      return {
        index: 1,
        page: 1,
        type: 0,
        list: [], // 买单列表
      }
    },
    watch: {
      index(val) {
        if (val === 1) {
          this.type = 0;
          this.page = 0;
          this.getTradingList() //  委托订单列表
        } else if (val === 2) {
          console.log(2);
          this.type = 1;
          this.page = 0;
          this.getTradingList() //  委托订单列表
        } else if (val === 3) {
          this.$ui.push('/pages/cardService/cardEntrustment')
          console.log(3);
        } else if (val === 4) {
          this.$ui.push('/pages/cardService/cardMyEntrustment')
          console.log(4);
        } else if (val === 5) {
          this.$ui.push('/pages/cardService/cardOrder')
        }
      }
    },
    onShow() {

      this.type = 0;
      this.page = 0;
      this.index = 1;
      this.getTradingList() //  委托订单列表
    },
    methods: {
      /**
       * 打开买单
       */
      openBuyDia(item) {
        this.$ui.push(`/pages/cardService/buy?id=${item.trading_id}&type=${this.type}`)
      },
      /**
       *  委托订单列表
       */
      getTradingList() {
        this.$ui.loading('加载中')
        getTrading({
          page: this.page,
          type: this.type,
          code: 'pibc',
          way: 0
        }).then(res => {
          if (res.code == 200) {
            this.list = res.data
            uni.hideLoading()
          } else {
            this.$ui.toast(res.msg)
          }
        })
      },
      /**
       * 委托交易订单
       */
      getOrderList() {
        getOrder({
          page: this.page,
          type: 0
        }).then(res => {
          if (res.code == 200) {

          } else {
            this.$ui.toast(res.msg)
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .card_record {
    .tabs {
      height: 98rpx;
      background-color: #fff;
      padding: 0 31rpx;
      box-sizing: border-box;

      .tab {
        height: 98rpx;
        line-height: 98rpx;
        text-align: center;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
        position: relative;
      }

      .active-tab {
        color: #333333;
        font-size: 28rpx;
        font-weight: bold;
      }

      .slider {
        width: 74rpx;
        height: 2rpx;
        background: #D2B17C;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
      }

      .none {
        display: none;
      }
    }

    .tab-content {
      box-sizing: border-box;
      padding: 39rpx;

      .cell {
        margin-bottom: 20rpx;
        width: 670rpx;
        height: 166rpx;
        background: #FFFFFF;
        box-sizing: border-box;
        padding: 39rpx;
        border-radius: 10rpx;
      }
    }
  }

  .text_style {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: #666666;
  }

  .marginLeft {
    margin-left: 10rpx;
  }

  .image_css {
    width: 34rpx;
    height: 34rpx;
    margin-left: 10rpx;
  }

  .text_xian {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }
</style>
